<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" class="myinput" />
    <script>
        // 节流：一段时间内重复间隔时间多次执行代码；
        var myinput = document.querySelector(".myinput");

        // 一、简版节流；
        // 通过节流  ；
        // 记录时间；记录当前的时间戳；
        // var startTime = new Date().getTime(); 

        // myinput.oninput = function(){
        //     // console.log(this.value) //获取输入的值；
        //     var endTime = new Date().getTime();
        //     if((endTime-startTime)/1000>1){
        //         console.log(this.value);
        //         startTime = new Date().getTime();
        //     }
        // }

        // 二、通用版节流

        function trottle(fn, delay) {
            var startTime = new Date().getTime();
            return function () {
                var endTime = new Date().getTime();
                if ((endTime - startTime) / 1000 > delay) {
                    fn();
                    startTime = new Date().getTime();
                }
            }
        }

        document.onmousemove = trottle(function(){
            console.log("move");
        },1);

        // 总结： 防抖 ： 一段时间内执行 1次；（控制次数 施法前的摇 后置防抖）  
        // 节流 ：间隔一段时间 重复执行；（控制频率，技能cd）

    </script>
</body>

</html>